<!--
 * @author: 十一
 * @since: 2024-04-25
 * dictionary-components.vue
 * @desc: new page
-->
<template>
  <a-drawer
    v-model:open="open"
    width="500"
    :title="title"
    @close="onClose"
    @after-open-change="afterOpenChange"
  >
    <a-form
      ref="formRef"
      :model="formState"
      :rules="rules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <a-form-item label="站点名称" v-bind="validateInfos.title">
        <a-input v-model:value="formState.title" />
      </a-form-item>
      <a-form-item label="站点分类">
        <a-select v-model:value="formState.classify_id" placeholder="请选择所属分类">
          <a-select-option :value="item.id" v-for="item in categorys" :key="item.id">
            {{ item.title }}</a-select-option
          >
        </a-select>
      </a-form-item>
      <a-form-item label="是否收录">
        <a-select v-model:value="formState.type" placeholder="请选择性别">
          <a-select-option :value="item.code" v-for="item in types" :key="item.id">{{
            item.title
          }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="站点地址" v-bind="validateInfos.link">
        <a-input v-model:value="formState.link" />
      </a-form-item>
      <a-form-item label="描述" v-bind="validateInfos.description">
        <a-textarea v-model:value="formState.description" />
      </a-form-item>
      <a-form-item label="提交人手机号" v-bind="validateInfos.phone_number">
        <a-input v-model:value="formState.phone_number" />
      </a-form-item>
      <a-form-item label="提交人邮箱" v-bind="validateInfos.email">
        <a-input v-model:value="formState.email" />
      </a-form-item>
      <a-form-item label="提交人昵称" v-bind="validateInfos.nickname">
        <a-input v-model:value="formState.nickname" />
      </a-form-item>
      <a-form-item :wrapper-col="{ offset: 6, span: 18 }">
        <a-button @click="onSubmit" type="primary">提交</a-button>
      </a-form-item>
    </a-form>
  </a-drawer>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { Form } from 'ant-design-vue'
import { DataEcho } from '@/utils/dataEcho'
import { addSiteInclusion, editSiteInclusion, getClassificationList } from '@/servers/main'
import { message } from 'ant-design-vue'
import { useUserInfoStore } from '@/stores/userinfoStrore'
import { formatDictionaryList } from '@/utils/common'
import { useDictionaryStore } from '@/stores/useDictionaryStore'
const { dictionary } = useDictionaryStore()
const { userInfo } = useUserInfoStore()

const useForm = Form.useForm
const labelCol = { span: 6 }
const wrapperCol = { span: 18 }
const categorys = ref([])

function getData() {
  getClassificationList({ current: 1, pageSize: 1000 }).then((response) => {
    categorys.value = response.result.list
  })
}
getData()
const formState = reactive({
  user_id: userInfo.id,
  classify_id: '',
  title: '',
  link: '',
  description: '',
  phone_number: '',
  email: '',
  nickname: '',
  type: 0
})
const types = formatDictionaryList(dictionary, 'INCLUSION')
const rules = reactive({
  ico_url: [{ required: true, message: '图标不能为空', trigger: 'change' }],
  title: [{ required: true, message: '标题不能为空', trigger: 'change' }],
  resources_classify: [{ required: true, message: '分类不能为空', trigger: 'change' }],
  link: [{ required: true, message: '链接不能为空', trigger: 'change' }]
})
const { resetFields, validate, validateInfos } = useForm(formState, rules)
const onSubmit = () => {
  validate()
    .then(() => {
      if (state.value == 0) {
        addSiteInclusion(formState).then((res: any) => {
          if (res.code === 200) {
            message.success(res.message)
            emit('childGetData')
            onClose()
          } else {
            message.error(res.message)
          }
        })
      } else {
        editSiteInclusion(formState).then((res: any) => {
          if (res.code === 200) {
            message.success(res.message)
            emit('childGetData')
            onClose()
          } else {
            message.error(res.message)
          }
        })
      }
    })
    .catch((err) => {
      console.log('error', err)
    })
}
const open = ref<boolean>(false)
const afterOpenChange = (bool: boolean) => {
  console.log('open', bool)
}
let title = ref<string>('')
let state = ref<number>(0)
const showDrawer = (value: any) => {
  open.value = true
  title.value = value.title
  state.value = value.state
  resetFields()
  if (value.state == 1) {
    DataEcho(formState, value.options)
  }
}
const onClose = () => {
  resetFields()
  title.value = '新增'
  open.value = false
}
const emit = defineEmits(['childGetData'])
defineExpose({ showDrawer })
</script>
<style lang="less" scoped>
:deep .ant-row {
  align-items: center;
}
</style>
